<template>
  <div class="trend">
    同比昨日
    <SvgIcon v-if="flag === 'up'" class="trend-icon" color="#F5222D" icon="ep:caret-bottom"/>
    <SvgIcon v-else-if="flag === 'down'" class="trend-icon" color="#54FF00" icon="ep:caret-top"/>
    <slot/>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';
import { SvgIcon } from '@/components/icon';

defineProps({
  flag: {
    type: String as PropType<'up' | 'down' | 'none'>,
    validator(value: string): boolean {
      return ['up', 'down', 'none'].includes(value);
    },
  },
});
</script>

<style lang="scss" scoped>
.trend {
  display: inline-flex;
  align-items: center;

  .trend-icon {
    margin-left: 3px;
  }
}
</style>
